<template>
  <div class="app-container">
    <el-row type="flex" align="center">
      <classloader-chose v-model="classloaderName"/>

      <el-button-group>
        <el-button class="margin-left" size="small" @click="dialog.single.visible = true" >单文件上传</el-button>
        <el-button class="margin-left" size="small" @click="dialog.multi.visible = true" >多文件上传</el-button>
        <el-button class="margin-left" size="small" @click="dialog.pom.visible = true">Pom 添加工件</el-button>
      </el-button-group>
    </el-row>
    <el-row v-if="classloaderName">
      <el-col :span="24">
        <loader-tree-files :classloader-name="classloaderName" ref="loaderTreeFiles"/>
      </el-col>
    </el-row>

    <!-- 单文件上传 -->
    <el-dialog :visible.sync="dialog.single.visible" width="50%" :title="dialog.single.title" v-loading="dialog.single.loading">
      <upload-single :classloader-name="classloaderName" ref="uploadSingle"/>
      <span slot="footer" class="dialog-footer">
        <el-button class="" type="primary" size="small" @click="uploadSingle">确定上传</el-button>
      </span>
    </el-dialog>
    <!-- 多文件上传 -->
    <el-dialog :visible.sync="dialog.multi.visible" width="80%" :title="dialog.multi.title" v-loading="dialog.multi.loading">
      <upload-multi :classloader-name="classloaderName" ref="uploadMulti"/>
      <span slot="footer" class="dialog-footer">
        <el-button class="" type="primary" size="small" @click="uploadMulti">确定上传</el-button>
      </span>
    </el-dialog>
    <!-- pom 工件上传 -->
    <el-dialog :visible.sync="dialog.pom.visible" width="80%" :title="dialog.pom.title" v-loading="dialog.pom.loading">
      <upload-pom :classloader-name="classloaderName" ref="uploadPom"/>
      <span slot="footer" class="dialog-footer">
       <el-button class="" type="primary" size="small" @click="uploadPom">确定上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import ClassloaderChose from '@/views/core/classloader/ClassloaderChose'
import loaderTreeFiles from '@/views/core/classloader/loaderTreeFiles'
import loaderClasses from '@/views/core/classloader/loaderClasses'
import uploadSingle from '@/views/core/classloader/uploadSingle'
import uploadMulti from '@/views/core/classloader/uploadMulti'
import uploadPom from '@/views/core/classloader/uploadPom'

export default {
  name: 'classloader',
  components: {ClassloaderChose, loaderTreeFiles, loaderClasses, uploadSingle, uploadMulti, uploadPom},
  data(){
    return {
      classloaders: [],
      classloaderName: null,
      dialog: {
        single: {
          visible: false,
          title: '单文件上传',
          loading: false
        },
        multi: {
          visible: false,
          title: '上传多个文件',
          loading: false
        },
        pom: {
          visible: false,
          title: 'Pom 添加工件',
          loading: false
        }
      }
    }
  },
  methods: {
    uploadSingle(){
      this.$refs['uploadSingle'].submit().then(() => {
        this.dialog.single.visible = false
        this.$refs['loaderTreeFiles'].loaderTreeFiles()
      })
    },
    uploadMulti(){
      this.$refs['uploadMulti'].submit().then(() => {
        this.dialog.multi.visible = false
        this.$refs['loaderTreeFiles'].loaderTreeFiles()
      })
    },
    uploadPom(){
      this.$refs['uploadPom'].submit().then(() => {
        this.dialog.pom.visible = false
        this.$refs['loaderTreeFiles'].loaderTreeFiles()
      })
    }
  }
}
</script>

<style scoped>

</style>
